
<template>
  <div style="text-align: center">
  <!-- <button type="success" @click.once="setSignin"><span>签到</span></button>
      <button type="warning" @click.once="setSignout"><span>签退</span></button> -->
    <button id="btn-sign" type="button" class="btn btn-circle btn-lg"
      :class="{ 'btn-success': !isSignin, 'btn-primary': isSignin, 'btn-dark': isFinish }" @click="SignInOut" 
      :disabled="isFinish">{{ btnText
      }}</button>

    <div class="alert alert-primary" role="alert">
      当前状态：{{ stateinout }}
    </div>
    <!--    <el-table :data="statement" :header-cell-style="{'text-ailgn':'center'}">-->

    <!--      <el-table-column prop="flgSignin" label="今日签到状态" width="180">-->
    <!--      </el-table-column>-->
    <!--      <el-table-column prop="flgSignout" label="今日签退状态" width="180">-->
    <!--      </el-table-column>-->

    <!--    </el-table>-->
    <!-- <div><span>当前状态：{{stateinout}}</span></div> -->

  </div>
</template>

<style>
.btn-circle.btn-lg {
  width: 200px;
  height: 200px;
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.33;
  border-radius: 100px;
  margin: 10px;
}
</style>

<script>

import axios from "axios";

export default {
  name: 'MySigninout',
  data() {
    return {
      statements: ['请假中', '缺勤/未签到', '已签到', '未签退', '已签退'],
      stateinout: '',
      state: 0,
      btnText: '',
      isSignin: false,
      isFinish: false
    }
  },
  mounted() {
    this.getstate();
  },
  methods: {
    modify() {
      if (this.state == 1) {
        this.isSignin = false
        this.isFinish = false
        this.btnText = '签到'
      } else if (this.state == 2) {
        this.isSignin = true,
          this.isFinish = false,
          this.btnText = '签退'
      } else if (this.state == 4) {
        this.isSignin = true,
          this.isFinish = true,
          this.btnText = '已签退'
      }
    },
    getstate() {
      axios.get('/api/employee/state/' + localStorage.getItem('token')).then(res => {
        this.stateinout = this.statements[res.data.data];
        this.state = res.data.data;
        console.log(res.data.data)
        this.modify();
        console.log("state:" + this.state + " signin: " + this.isSignin + " finish: " + this.isFinish)
      })
    },
    SignInOut() {
      if (this.state == 1) {
        this.setSignin()
      } else {
        this.setSignout()
      }
    },
    setSignin() {
      axios.get('/api/employee/signin/' + localStorage.getItem('token')).then(res => {
        console.log(res.data.flg)
      })
      alert("签到成功");
      this.getstate();
    },
    setSignout() {
      axios.get('/api/employee/signout/' + localStorage.getItem('token')).then(res => {
        console.log(res.data.flg)
      })
      alert("签退成功");
      this.getstate();

    },
    // getSignState(){
    //   axios.get('/api/employee/signin/'+localStorage.getItem('token')).then(res=>{
    //       console.log(res.data.data)
    //   })
    //   axios.get('/api/employee/signout/'+localStorage.getItem('token')).then(res=>{
    //     console.log(res.data.data)
    //   })
    // }
  },

}
</script>
